﻿@using SplendidCRM.Ext.Helpers


           
<link href="../../themes/cupertino/jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">

    $(function () {

        // set up dialog form for call survey
        var surveyIcon = $("#survey-icon");
        var surveyIconOffset = surveyIcon.offset();

        $("#survey-form").dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            resizable: false,
            height:125,
            position: [surveyIconOffset.left, surveyIconOffset.top + surveyIcon.height()]
        });
        
        // set up event: popup Survey Form when mouse over the shortcut icon
        $("#survey-icon").bind("mouseover", function (event) {
                        $("#survey-form").dialog('open');
                        $("#availablePort").html('[...processing...]');    
                        $.getJSON( "@Url.Action("GetAvailablePort")" , function(result) {
                            $("#availablePort").html(result);    
                        });
        });
        
        // set up event: User click to send survey result
        model.saveCallSurvey = function(isAgreed) {
            return {
                validate: false,
                stringify: true,
                updated: function (result) {
                    //console.log(result.Success);
                    if (result.Success == true) {
                        $('#uxAgreeSurvey').attr("disabled", true);
                        $('#uxAgreeSurvey').css("background-color", "gray");

                        $('#uxDisAgreeSurvey').attr("disabled", true);
                        $('#uxDisAgreeSurvey').css("background-color", "gray");
                        
                        $('#errorMessagePnl').html("Survey request is saved.");
                        $('#errorMessagePnl').css("color", "blue");
                    }

                    else {
                        $('#errorMessagePnl').html(result.Error);
                        $('#errorMessagePnl').css("color", "red");
                    }
                },
                    data: {
                    call: this.Call,
                    customer: this.Customer,
                    isAgreed: isAgreed
                }
            };
        };
        linq.model(model, '#survey-form');
        
    });
    
</script>

<div id="survey-icon" class="surveyTrigger"> 
<img class="surveyIcon" src="@Url.Content("~/Views/Images/DoSurvey.png")" />
</div>

<div id="survey-form" class="surveyForm"> 
    <div autocomplete="off" class="form">
        @Html.Field(FieldType.Span, new { fieldLabel = "Available Ports: ", containerClass = "solid-border availablePort", id = "availablePort" })
        <div style="padding: 10px 0 0 80px;clear:both">
            <input type="submit" class="form-button" id="uxAgreeSurvey" value="Agree" href="@Url.Action("SaveSurvey")" data-bind="send: saveCallSurvey(true)" />
            <input type="submit" class="form-button" id="uxDisAgreeSurvey" value="DisAgree" href="@Url.Action("SaveSurvey")" data-bind="send: saveCallSurvey(false)" />
        </div>
        <div id="errorMessagePnl"></div>
    </div>
    
</div>
